<template>
 <div class="main-layout">
      <main>
        <slot/>
      </main>
      <footer>
        <router-link to="/home">
            <div class="abc"> <span class="iconfont icon-gouwuche"></span>
              <i>首页</i>
            </div>
        </router-link>
        <router-link to="/category">
            <div> <span class="iconfont icon-gouwuche"></span>
              <i>分类</i>
            </div>
        </router-link>
        <router-link to="/cart">
            <div><span class="iconfont icon-wodedingdan"></span>
                <i>购物车</i>
            </div>
        </router-link>
        <router-link to="/myPage">
            <div><span class="iconfont icon-shouye"></span>
                <i>我的</i>
            </div>
        </router-link>
      </footer>
 </div>
</template>

<script>
export default {
}
</script>

<style lang="less" scoped>
.router-link-exact-active,.router-link-active{
  color: red;
}

.main-layout{
      // height: 100%;
      width: 100%;
      display: block;
      height: calc(100% - 48px);
      background: #dfbfaa;
      position: relative;
      >main{
        height: 100%;
        display: block;
        flex: 1;
        // height: calc(100% - 48px);
        overflow-x: hidden;
        // background: yellow;
        margin: 0 auto;
        width: 100%;
      }
      >footer{
        height: 48px;
        background: pink;
        display: flex;
        justify-content: space-around;
        // position: absolute;
        // bottom: 0;
        >a div{
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-items: center;
            text-align: center;
        }
        >a div .iconfont[data-v-5954443c][data-v-5954443c] {
          font-size: 20px
        }
      }
  }

</style>
